<html lang="zh-Hans">
  <head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
      <script>
        var imgSrc = '';

        (function loadSplashScreen() {
          var img = new Image();

            img.onload = function() {
              setTimeout(function () {
                var loadingWrapper = document.getElementById('loading');
                var loadingInner = document.createElement('div');

                var version = document.createElement('H3');
                version.appendChild(document.createTextNode('v' + global.SQLECTRON_CONFIG.version));

                loadingInner.appendChild(version);
                loadingInner.appendChild(img);

                loadingWrapper.appendChild(loadingInner);

                loadingInner.style.display = 'block';

                setTimeout(function () {
                  loadingWrapper.className = 'loading-hidden';

                  setTimeout(function () {
                    loadingWrapper.remove();
                  }, 500);
                }, 4500);

                document.getElementById('loading-signal').remove();
              }, 500);
            };

            img.src = imgSrc;
        })();
      </script>

      <style>
        #loading h3 {
          padding: 0;
          font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
          font-size: 14px;
          line-height: 30px;
          color: rgba(0,0,0,.87);
          position: absolute;
          bottom: 0;
          left: 50%;
        }

        #loading {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: #fff;
          color: #333333;
          z-index: 100000;
          text-align: center;
        }

        #loading div {
          display: none;
        }

        #loading img {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -404px;
          margin-top: -202px;
        }

        .loading-hidden {
          opacity: 0;
          transition: opacity .1s ease-out;
        }

        /* Signal Loader: https://www.pexels.com/blog/css-only-loaders */
        #loading-signal {
          box-sizing: initial;

          border: 3px solid #75C4C1;
          border-radius: 30px;
          height: 30px;
          left: 50%;
          margin: -15px 0 0 -15px;
          opacity: 0;
          position: absolute;
          top: 50%;
          width: 30px;

          animation: pulsate 1s ease-out;
          animation-iteration-count: infinite;
          z-index: 100001;
        }

        @keyframes pulsate {
          0% {
            transform: scale(.1);
            opacity: 0.0;
          }
          50% {
            opacity: 1;
          }
          100% {
            transform: scale(1.2);
            opacity: 0;
          }
        }
      </style>

<script type="text/javascript" src="%PUBLIC_URL%/myremote.js"></script>
    <title>sqlectron</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="loading-signal"></div>
      <div id="loading"></div>
    <div id="root"></div> 
  </body>
</html>
